<!-- ElementUI 表格 + 分页 + 条件查询 -->
<template>
  <div>

    <!-- 搜索框 -->
    <!-- 文本输入框 -->
    <el-input placeholder="请输入姓名" size="mini" v-model="queryDto.name"></el-input>
    <!-- 下拉列表 -->
    <el-select placeholder="请选择性别" size="mini" v-model="queryDto.sex" clearable>
      <el-option value="男"></el-option>
      <el-option value="女"></el-option>
    </el-select>
    <!-- 下拉列表 -->
    <el-select placeholder="请选择年龄" size="mini" v-model="queryDto.age" clearable>
      <el-option value="0,20" label="0到20岁"></el-option>
      <el-option value="21,30" label="21到30岁"></el-option>
      <el-option value="31,40" label="31到40岁"></el-option>
      <el-option value="41,120" label="41到120岁"></el-option>
    </el-select>
    <!-- 搜索按钮 -->
    <el-button type="primary" size="mini" @click="search()">搜索</el-button>
    <!-- 分割线 -->
    <el-divider></el-divider>

    <!-- 表格 -->
    <el-table :data="students">
      <el-table-column label="编号" prop="id"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="性别" prop="sex"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :total="total"
      :page-size="queryDto.size"
      :current-page="queryDto.page"
      layout="prev,pager,next,sizes,->,total"
      :page-sizes="[5, 10, 15, 20]"
      @current-change="currentChange"
      @size-change="sizeChange"
    ></el-pagination>

  </div>
</template>
<script>
import axios from "../util/myaxios";
const options = {
  async mounted() {
    // 分页查询，获取学生数据
    this.query();
  },
  methods: {
    // 改变当前页调用方法
    currentChange(page) {
      // 修改页码
      this.queryDto.page = page;
      this.query(); // 修改后要重新查询
    },
    // 修改每页记录数
    sizeChange(size) {
      this.queryDto.size = size;
      this.query(); // 修改后要重新查询
    },
    // 发送分页查询
    async query() {
      const resp = await axios.get('api/students/q', {
        // 查询参数，拼接在 url 后面，get 方式请求没有请求体
        params: this.queryDto
      });
      this.students = resp.data.data.list;
      this.total = resp.data.data.total;
    },
    search() {
      this.query();
    }
  },
  data() {
    return {
      // 存放学生数据数组
      students: [],
      // 总记录数
      total: 0,
      // 分页数据
      queryDto: {
        name: '',
        sex: '',
        age: '',
        page: 1,
        size: 5
      }
    };
  },
};
export default options;
</script>
<style scoped>
.el-input--mini,
.el-select--mini {
    width: 193px;
    margin: 10px 10px 0 0;
}
</style>